<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>折线图</title>-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
<!--    <link rel="stylesheet" href="../static/css/normalize.css" />-->
<!--    <link rel="stylesheet" href="../static/css/swiper.min.css" />-->

<!--    <link href="../static/css/line_chart.css" rel="stylesheet"/>-->
<!--    <script src="../static/js/echarts.min.js"></script>-->
<!--    <script src="../static/js/jquery.js"></script>-->

<!--    <style>-->
<!--        #line {-->
<!--            width: 750px;-->
<!--            height: 600px;-->
<!--        }-->
<!--    </style>-->

{% extends 'line_base.html' %}
{%block title%}
折线图
{%endblock%}


{%block body%}
  <div id="line"></div>
  <script src="../static/js/ec_line_chart.js"></script>
{%endblock%}

{%block js%}
<!--    <script src="../static/js/show_datas.js"></script>-->
    <script>
              function show_line_data(){
                $.ajax({
                    url:"/line",
                    success:function(data){
                        option_line.xAxis.data=data.day
                        option_line.series[0].data=data.moisture_content
                        option_line.series[1].data=data.tender_bud_num
                        option_line.series[2].data=data.air_temperature
                        option_line.series[3].data=data.air_humidity
                        ec_line.setOption(option_line)
                    },error:function(xhr,type,errorThrown){

                    }
                })
              }

              show_line_data();
              setInterval(show_line_data,3000);
    </script>
{%endblock%}


<!--</head>-->
<!--<body>-->
<!--  <section class="warp">-->
<!--        &lt;!&ndash; 头部区域 &ndash;&gt;-->
<!--        <header class="header">历史数据</header>-->
<!--        &lt;!&ndash; 图片显示部分 &ndash;&gt;-->
<!--        <nav class="nav">-->
<!--            <div class="con-hd">-->
<!--                <h4>-->
<!--                    <span class="icon"><img src="../static/icons/纯天然.png" alt="" /></span>-->
<!--                    时间-->
<!--                </h4>-->
<!--            </div>-->
<!--            <img src="../static/images/tea1.png" alt="" />-->
<!--        </nav>-->
<!--  </section>-->

<!--  <div id="line"></div>-->
<!--  <script src="../static/js/ec_line_chart.js"></script>-->
<!--  <footer class="footer">-->
<!--        <a href="index.html" class="item">-->
<!--            <img src="../static/icons/首页1.png" alt="" />-->
<!--            <p>首页</p>-->
<!--        </a>-->
<!--        <a href="machine.html" class="item">-->
<!--            <img src="../static/icons/分类1.png" alt="" />-->
<!--            <p>设备控制</p>-->
<!--        </a>-->
<!--        <a href="history.html" class="item">-->
<!--            <img src="../static/icons/历史.png" alt="" />-->
<!--            <p>历史数据</p>-->
<!--        </a>-->
<!--        <a href="mine.html" class="item">-->
<!--            <img src="../static/icons/我的1.png" alt="" />-->
<!--            <p>我的</p>-->
<!--        </a>-->
<!--  </footer>-->

<!--  <script src="./js/flexible.js"></script>-->
<!--  <script src="./js/swiper.min.js"></script>-->
<!--  <script>-->
<!--      function show_line_data(){-->
<!--        $.ajax({-->
<!--            url:"/line",-->
<!--            success:function(data){-->
<!--                option_line.xAxis.data=data.day-->
<!--                option_line.series[0].data=data.moisture_content-->
<!--                option_line.series[1].data=data.tender_bud_rate-->
<!--                option_line.series[2].data=data.air_temperature-->
<!--                option_line.series[3].data=data.air_humidity-->
<!--                ec_line.setOption(option_line)-->
<!--            },error:function(xhr,type,errorThrown){-->

<!--            }-->
<!--        })-->
<!--      }-->

<!--      show_line_data();-->
<!--      setInterval(show_line_data,3000);-->
<!--  </script>-->
<!--</body>-->
<!--</html>-->